<template>
  <div>
    <p class="demonstration">hover 触发子菜单</p>
    <el-cascader
      :value="value"
      :options="options"
      :props="cascaderProps"
      @change="handleChange($event)"
    ></el-cascader>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  // props: {
  //   value: {
  //     type: String,
  //     default: ''
  //   }
  // },
  model: {
    prop: 'value',
    event: 'selectChange'
  },
  props: {
    text: String,
    default () {
      return ''
    }
  },
  data () {
    return {
      value: [],
      options: [],
      data: [],
      cascaderProps: {
        expandTrigger: 'hover',
        checkStrictly: 'true'
      }
    }
  },
  created () {
    this.getData()
  },
  methods: {
    handleChange (e) {
      // console.log(this.value)
      console.log(e)
      this.$emit('selectChange', e)
    },
    async getData () {
      try {
        const res = await axios({
          method: 'get',
          url: '/department.json.json'
        })
        this.data = res.data
        this.formatData()
      } catch (error) {
        console.log(error)
      }
    },
    formatData () {
      const children1 = []
      const children2 = []
      const children3 = []
      this.data.forEach((item) => {
        if (item.name.includes('长沙校区')) {
          const obj = {
            value: item.name,
            label: item.name
          }
          children1.push(obj)
        } else if (item.name.includes('武汉校区')) {
          const obj = {
            value: item.name,
            label: item.name
          }
          children2.push(obj)
        } else if (item.name.includes('成都校区')) {
          const obj = {
            value: item.name,
            label: item.name
          }
          children3.push(obj)
        }
      })
      const children11 = {
        label: children1.splice(0, 1)[0].label,
        value: children1.splice(0, 1)[0].value,
        children: children1
      }
      const children22 = {
        label: children2.splice(0, 1)[0].label,
        value: children2.splice(0, 1)[0].value,
        children: children2
      }
      const children33 = {
        label: children3.splice(0, 1)[0].label,
        value: children3.splice(0, 1)[0].value,
        children: children3
      }
      const children = []
      children.push(children11, children22, children33)
      this.options.push(
        {
          value: this.data[0].name,
          label: this.data[0].name,
          children
        }
      )
    }
  }
}
</script>

<style>
</style>
